<template>
	<div class="setting">
		<Layout>
			<Header class="header">
				<span class="title"> {{ $t('setting') }} </span>
				<div class="close" @click="closeHandle">
					<GuanBi width="1.13rem" height="1.13rem" />
				</div>
			</Header>
			<Layout class="main">
				<Sider class="sider">
					<Menu :active-name="activeName" width="13.13rem" @on-select="selectHandle">
						<MenuItem name="1">{{ $t('generalItem') }}</MenuItem>
						<MenuItem name="2">{{ $t('keyboardShortcuts') }}</MenuItem>

						<MenuItem name="3"
							><Badge dot :count="count"
								><span>{{ $t('aboutUs') }}</span></Badge
							></MenuItem
						>
					</Menu>
				</Sider>
				<Content class="content">
					<div v-show="activeName === '1'" class="item">
						<div>
							<!-- <div class="shortcut-item">
								<span class="label">{{ $t('lang') }}：</span>
								<div>
									<Dropdown trigger="click" @on-click="setLang">
										<a href="javascript:void(0)">
											{{ title }}
											<Icon :size="18" type="md-arrow-dropdown" />
										</a>
										<DropdownMenu slot="list">
											<DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}</DropdownItem>
										</DropdownMenu>
									</Dropdown>
								</div>
							</div> -->
							<div class="shortcut-item">
								<span class="label-item">
									语音唤醒提示语：
									<Tooltip trigger="hover" max-width="180" theme="dark" transfer content="默认语音唤醒提示语为：你好小蟹。"><Icon type="ios-help-circle" /> </Tooltip>
								</span>
								<div>
									<Input :maxlength="10" @on-blur="onInputBlur" v-model="system.VoiceWakeUpPrompt" />
								</div>
							</div>
							<div class="shortcut-item setting-item">
								<span class="label-item">{{ $t('general') }}：</span>
								<div class="tongyong">
									<Checkbox :true-value="1" :false-value="0" @on-change="changeUpgradeHandle" v-model="system.AutoUpgradeEnabled">{{ $t('update') }}</Checkbox>
									<Checkbox :true-value="1" :false-value="0" @on-change="changeAutoStartHandle" v-model="system.AutoStartEnabled">{{ $t('autoStart') }}</Checkbox>
									<Checkbox :true-value="1" :false-value="0" @on-change="changeVoiceWakeUpHandle" v-model="system.VoiceWakeUpEnabled">{{ $t('voiceWakeUp') }}</Checkbox>
									<Checkbox :true-value="1" :false-value="0" disabled>适配系统缩放比例</Checkbox>
									<Checkbox :true-value="1" :false-value="0" @on-change="changeAutoVoicePlayHandle" v-model="system.AutoVoicePlay">开启语音自动播放</Checkbox>
								</div>
							</div>
						</div>
					</div>
					<div v-show="activeName === '2'" class="item">
						<div>
							<div class="shortcut-item">
								<span class="label-item">{{ $t('openApp') }}：</span>
								<div>
									<Button class="input-button" style="font-size: 1.13rem" type="default" @click="clickHandle">{{ system.AppShortcutKey }}</Button>
								</div>
							</div>
							<div class="shortcut-item">
								<span class="label-item">{{ $t('checkShortcuts') }}：</span>
								<div>
									<Checkbox @on-change="changeConflictReminderHandle" :true-value="1" :false-value="0" v-model="system.ConflictReminderEnabled">{{ $t('shortcutsRemain') }}</Checkbox>
								</div>
							</div>
							<div class="action" style="padding-left: 12.43rem; margin-top: 30px">
								<Button @click="backClickhandle" type="default">恢复默认设置</Button>
							</div>
						</div>
					</div>
					<div v-show="activeName === '3'" class="item">
						<div class="update">
							<!-- <img :src="logo" alt="logo" width="100" height="100" /> -->
							<Logo width="5.25rem" height="4.38rem"></Logo>
							<p class="app-title">鸡小蟹</p>
							<p class="version">{{ $t('version') }}：Version {{ system.version }}</p>

							<p class="action update-action">
								<Button @click="checkUpdate" :type="isShowDot ? 'primary' : 'default'">{{ $t('checkUpdate') }}</Button
								><New class="new" v-show="isShowDot"></New>
							</p>
							<p v-show="isUpdate" class="update-p">当前已经是最新版本！</p>
						</div>
					</div>
					<div class="footer">
						<span>MECHREVO. ALL RIGHTS RESERVED 同方国际有限公司版权所有</span>
					</div>
				</Content>
			</Layout>
		</Layout>
		<short-cut v-model="isShow" :hotkey="[system.AppShortcutKey]" @on-ok="okCallBack"></short-cut>
		<update v-model="isShowUpdate" :data="updateContent" @update="closeHandle"></update>
	</div>
</template>
<script>
import Logo from '@/components/svg/logo.vue'
import New from '@/components/svg/new.vue'
import GuanBi from '@/components/svg/guanbi.vue'
import { mapMutations, mapGetters, mapActions } from 'vuex'
import ShortCut from './shortcutnew.vue'
import Update from './update.vue'
export default {
	name: 'Setting',
	components: {
		ShortCut,
		Update,
		Logo,
		New,
		GuanBi
	},
	data() {
		return {
			activeName: '1',
			localList: {
				'zh-CN': '中文简体',
				'zh-TW': '中文繁体',
				'en-US': 'English'
			},
			isShow: false,
			isShowUpdate: false,
			updateContent: {
				version: '',
				remark: ''
			},
			isUpdate: false,
			VoiceWakeUpPrompt: '',
			type: 'click'
		}
	},
	computed: {
		...mapGetters(['system', 'local']),
		title() {
			return this.localList[this.$store.state.app.local]
		},
		isShowDot() {
			return this.updateContent.version && this.system.version !== this.updateContent.version
		},
		count() {
			return this.updateContent.version && this.system.version !== this.updateContent.version ? 1 : 0
		}
	},
	methods: {
		...mapMutations(['setLocal', 'setSystem']),
		...mapActions(['getSystem']),
		selectHandle(name) {
			this.activeName = name
			console.log(this.$t('general'))
		},
		closeHandle() {
			chrome.webview.hostObjects.form.OnPageEvent('close')
		},
		async setLang(name) {
			await chrome.webview.hostObjects.form.SetKVAsync('Lang', name.toString())
			this.setLocal(name)
			this.$i18n.locale = name
		},
		async clickHandle() {
			await chrome.webview.hostObjects.form.StartHotKeyListeningAsync()
			this.isShow = true
		},
		async okCallBack(val) {
			const res = await chrome.webview.hostObjects.form.SetKVAsync('AppShortcutKey', val.toString())
			if (res) {
				this.setSystem({ ...this.system, ...{ AppShortcutKey: val } })
			} else {
				this.$Message.error({ content: '快捷键冲突，请重新设置', duration: 3 })
			}
			await chrome.webview.hostObjects.form.StopHotKeyListeningAsync()
		},
		async backClickhandle() {
			const res = await chrome.webview.hostObjects.form.SetKVAsync('AppShortcutKey', 'win+?')
			if (res) {
				this.setSystem({ ...this.system, ...{ AppShortcutKey: 'win+?' } })
			} else {
				this.$Message.error({ content: '快捷键冲突，请重新设置', duration: 3 })
			}
		},
		checkUpdate() {
			chrome.webview.hostObjects.form.GetVersionAsync().then((res) => {
				const { oldversion, version, remark, url } = JSON.parse(res)
				console.log(oldversion, version, remark, url)
				if (version && oldversion !== version) {
					this.isUpdate = false
					this.isShowUpdate = true
					this.updateContent = { version, remark, url }
				} else {
					this.isUpdate = true
				}
			})
			this.type = 'click'
			chrome.webview.hostObjects.form.OnPageEvent('version')
		},
		async changeUpgradeHandle(val) {
			await chrome.webview.hostObjects.form.SetKVAsync('AutoUpgradeEnabled', val.toString())
			this.setSystem({ ...this.system, ...{ AutoUpgradeEnabled: val } })
		},
		async changeAutoStartHandle(val) {
			await chrome.webview.hostObjects.form.SetKVAsync('AutoStartEnabled', val.toString())
			this.setSystem({ ...this.system, ...{ AutoStartEnabled: val } })
		},
		async changeVoiceWakeUpHandle(val) {
			await chrome.webview.hostObjects.form.SetKVAsync('VoiceWakeUpEnabled', val.toString())
			this.setSystem({ ...this.system, ...{ VoiceWakeUpEnabled: val } })
		},
		async changeConflictReminderHandle(val) {
			await chrome.webview.hostObjects.form.SetKVAsync('ConflictReminderEnabled', val.toString())
			this.setSystem({ ...this.system, ...{ ConflictReminderEnabled: val } })
		},
		async changeAutoVoicePlayHandle(val) {
			await chrome.webview.hostObjects.form.SetKVAsync('AutoVoicePlay', val.toString())
			this.setSystem({ ...this.system, ...{ AutoVoicePlay: val } })
		},
		async onInputBlur() {
			if (this.system.VoiceWakeUpPrompt !== '') {
				await chrome.webview.hostObjects.form.SetKVAsync('VoiceWakeUpPrompt', this.system.VoiceWakeUpPrompt)
			}
		}
	},
	mounted() {
		this.getSystem()
		this.setLocal(this.system.Lang)
		this.$i18n.locale = this.system.Lang
		this.type = 'auto'
		chrome.webview.hostObjects.form.GetVersionAsync().then((res) => {
			console.log(res)
			const { oldversion, version, remark, url } = JSON.parse(res)
			this.setSystem({ ...this.system, ...{ version: oldversion } })
			this.updateContent = { version, remark, url }
		})
	}
}
</script>
<style lang="less" scoped>
.setting {
	color: var(--setting-text-title-color);
	font-size: 1.13rem !important;
	/deep/.ivu-checkbox-inner {
		border-color: var(--ivu-checkbox-border, #2d8cf0);
		background-color: var(--ivu-checkbox-inner, #2d8cf0);
	}
	/deep/.ivu-checkbox-checked .ivu-checkbox-inner {
		border-color: #2d8cf0;
		background-color: #2d8cf0;
	}
	/deep/.ivu-checkbox-disabled .ivu-checkbox-inner {
		border-color: #dcdee2;
		background-color: #f3f3f3;
	}
	// /deep/.ivu-checkbox-checked .ivu-checkbox-inner:after {
	// 	border: 2px solid var(--text-color);
	// }

	/deep/.ivu-input {
		color: var(--setting-text-title-color);
		background-color: var(--bg-color);
		border: 1px solid var(--input-border-color);
	}
	.header {
		background: var(--setting-header-bg-color);
		display: flex;
		justify-content: space-between;
		padding: 0 1.87rem;
		// border-bottom: 1px solid #ddd;
		app-region: drag;
		height: 3.5rem;
		line-height: 3.5rem;
		.title {
			font-family: PingFangSC-Medium;
			letter-spacing: 0;
			font-size: 1.13rem;
			color: var(--ivu-label-text-color);
			font-weight: 600;
		}
		.close {
			cursor: pointer;
			app-region: no-drag;
			/deep/.fill-color {
				fill: var(--header-close-color);
			}
		}
	}
	.main {
		// padding: 0 10px;
		background-color: var(--main-bg-color);
	}
	.sider {
		width: 13.13rem !important;
		min-width: 13.13rem !important;
		max-width: 13.13rem !important;
		flex: 0 0 13.13rem !important;
		/deep/.ivu-menu-light {
			background: var(--menu-bg-color);
			box-shadow: 0 3px 6px 0px rgba(197, 197, 197, 0.5);
		}
		/deep/.ivu-menu {
			height: 100vh;
		}
		/deep/.ivu-menu-item {
			padding-left: 60px;
			font-family: PingFangSC-Semibold;
			font-size: 1.13rem;
			color: var(--setting-text-title-color);
			letter-spacing: 0;
			font-weight: 600;
		}
		/deep/.ivu-menu-item-active {
			color: #f38800;
		}
	}
	.content {
		padding: 1.8rem 0 1.5rem 0;
		height: calc(100vh - 3.5rem);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		background: var(--main-bg-color);
		.item {
			display: flex;
			flex-direction: column;
			/* align-content: center; */
			align-items: stretch;
			.app-title {
				font-family: PingFangSC-Semibold;
				font-size: 1.25rem;
				color: var(--setting-text-title-color, #4f4a48);
				letter-spacing: 0;
				font-weight: 600;
				margin-top: 0.6rem;
			}
			.version {
				font-family: PingFangSC-Semibold;
				font-size: 1.25rem;
				color: var(--setting-text-title-color, #4f4a48);
				letter-spacing: 0;
				font-weight: 600;
				margin-top: 2.4rem;
				margin-bottom: 2.2rem;
			}
			.input-button {
				// color:var()
				// border-radius: 1.8rem;
				background-color: var(--bg-color);
				border-color: var(--input-border-color);
				color: var(--setting-text-color);
				padding: 0.5rem 2.05rem 0.5rem 2.05rem;
				height: 3rem;
				span {
					font-family: PingFangSC-Semibold;
					font-size: 1.13rem;
					letter-spacing: 0;
					line-height: 2rem;
				}
			}
			.action button {
				border-radius: 1.8rem;
				padding: 0.5rem 2.05rem 0.5rem 2.05rem;
				height: 3rem;
				font-weight: 600;
			}
			.action /deep/.ivu-btn-default {
				background: var(--ivu-btn-default-bg, #c6c6c6);
				border: var(--ivu-btn-default-border, 1px solid #c6c6c6);
			}
			.action /deep/.ivu-btn-default span {
				font-family: PingFangSC-Semibold;
				font-size: 1.13rem;
				color: var(--ivu-btn-default-color, #fff);

				letter-spacing: 0;
				line-height: 2rem;
				font-weight: 600;
			}
			.action /deep/.ivu-btn:hover {
				border: 1px solid transparent;
			}
			.update {
				display: flex;
				flex-direction: column;
				align-items: center;
				.update-action {
					position: relative;
					.new {
						position: absolute;
						right: -30px;
						top: -10px;
					}
				}
				/deep/.fill-color {
					fill: var(--bg-color);
				}
				/deep/.fill-color2 {
					fill: var(--svg-logo-color);
				}
			}
		}
		.footer span {
			font-family: PingFangSC-Regular;
			font-size: 0.88rem;
			color: var(--chat-footer-tips, #c6c6c6);
			letter-spacing: 0;
			font-weight: 400;
		}
		.tongyong {
			display: flex;
			align-items: flex-start;
			margin-bottom: 1.43rem;
			flex-direction: column;
			label {
				// color: var(--label-color);
				margin-bottom: 0.9rem;
			}
		}
		.shortcut-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 1.43rem;
			.label-item {
				font-size: 1.13rem;
				letter-spacing: 0;
				font-weight: 600;
				width: 11rem;
				text-align: right;
				margin-right: 1.43rem;
				color: var(--label-color);
			}
		}
		.update-p {
			color: var(--text-update-color, #2d8cf0);
			margin-top: 1.5rem;
		}
		.setting-item {
			align-items: flex-start;
		}
		.new {
			margin-left: 5px;
		}
	}
}
</style>
